<template>
  <div>
   <mini-head :title="$route.name"/>
    <div class="text">登录</div>
    <van-form class="form" @submit="onSubmit">
      <van-field
        v-model="user.username"
        name="username"
        label="用户名:"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          {
            validator: (value) => {
              if (value === 'jack') {
                return false;
              } else {
                return true;
              }
            },
            message: '不喜欢，不服？忍着',
          },
        ]"
      />
      <van-field
        v-model="user.pwd"
        type="password"
        name="pwd"
        label="密码:"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: /^[A-Za-z0-9]{6,12}$/,
            message: '请输入6-12位的数字或字母',
          },
        ]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <a class="a" href="/register">没有账号？去注册</a>
    <van-divider
      :style="{ color: 'rgb(128, 100, 100)', borderColor: 'rgb(33, 133, 91)', padding: '0 16px' }"
    >
      第三方登录
    </van-divider>
    <div style="text-align: center;font-size: 0.3rem;">
    <van-icon size="20" name="music-o" />QQ音乐
    <span style="display: inline-block;width: .5rem;">     </span>
    <van-icon size="20" name="envelop-o" />短信
    </div>
  </div>
</template>

<script>
import { userLogin } from '_api'
import { Toast } from 'vant'
import MiniHead from '../../components/MiniHead.vue'
export default {
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      }
    }
  },
  methods: {
    onSubmit (params) {
      userLogin({
        deviceId: 1232411,
        deviceName: '74110zbzb',
        ...params
      }).then((res) => {
        if (res.data.code === 0) {
          localStorage.setItem('name', this.user.username)
          localStorage.setItem('uid', res.data.data.uid)
          localStorage.setItem('token', res.data.data.token)
          Toast.success({
            message: '登录成功',
            duration: 1000,
            onClose: () => {
              if (this.$route.query.from) {
                this.$router.replace(this.$route.query.from)
              } else {
                this.$router.replace('/home')
              }
            }
          })
        } else {
          Toast.fail('登录失败,用户名或密码错误')
        }
      })
    }
  },
  components: { MiniHead }
}
</script>

<style lang="scss" scoped>
a {
  font-size: 0.3rem;
}
.text {
  margin-top: 2rem;
  text-align: center;
  color: rgb(128, 100, 100);
}
.form {
  margin-top: 2rem;
}
/deep/.van-field__control {
  border-radius: 0.4rem;
  background-color: whitesmoke;
  transform: translateX(-1rem);
  padding-left: 0.4rem;
}
</style>
